<template>
  <div class="join">
    <div class="join-bg">
      <img src="@/assets/images/news.png" alt="" />
    </div>
    <div class="content">
      <div class="subtitle">招聘职位</div>
      <div class="list">
        <el-card>
          <div v-for="item in jobList" class="item">
            <el-collapse v-model="activeName" accordion v-if="item.status === 0">
              <el-collapse-item :name="item.id">
                <template #title>
                  <div class="header">
                    <div class="item-title">{{ item.title }}</div>
                    <div class="keywords">
                      <span>{{ item.seoTitle }} / </span>
                      <span>{{ item.seoKeyword }} / </span>
                      <span>{{ item.seoDescription }}</span>
                    </div>
                  </div>
                </template>
                <div class="desc" v-html="item.content"></div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-card>
      </div>
      <div class="subtitle">招聘信息直通车</div>
      <div class="links">
        <div v-for="item in websLink">
          <a class="weblink" title="" target="_blank" :href="item.linkUrl">{{ item.title }}</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { $http } from '@/service/request/index'

const jobList = ref([])
const websLink = ref([])
const activeName = ref('')

const getJobList = async () => {
  const { data } = (await $http('queryJobList', {})) as any
  jobList.value = data
}
const getJobsWeb = async () => {
  const { data } = (await $http('queryJobsWeb', {})) as any
  websLink.value = data
}
getJobList()
getJobsWeb()
</script>
<style scoped lang="scss">
@import './styles/common.scss';
@import './styles/web.scss';
@import './styles/phone.scss';
</style>
